import moduleStore from '@/store/module';
import { createStoreBindings } from '@/miniprogram_npm/mobx-miniprogram-bindings/index';

import tools from '@/utils/tools';
import { initChart, weatherChartOption } from '@/utils/echart';
import { getWeatherPrediction } from '@/service/api/predict';

import Message from 'tdesign-miniprogram/message/index';
const messageDefaultConfig = (content) => {
    return {
        content: content,
        offset: [60, 32],
        duration: 2000
    };
};

let myChart;
// 重新绘制图表
const chartResize = (that) => {
    if (!myChart) return;
    wx.createSelectorQuery()
        .in(that)
        .select('#chart-container')
        .boundingClientRect((rect) => {
            const screenWidth = wx.getSystemInfoSync().screenWidth;
            const dpr = wx.getSystemInfoSync().pixelRatio;
            const pxWidth = rect.width * (screenWidth / 750);
            const pxHeight = rect.height * (screenWidth / 750);

            myChart.resize({
                width: pxWidth,
                height: pxHeight,
                devicePixelRatio: dpr
            });
        })
        .exec();
};

Page({
    data: {
        step: 7,
        pickerVisible: false,
        todayWeather: undefined,
        futureWeathers: undefined,
        currentDay: new Date().getDay(),
        ec: {
            onInit: initChart
        }
    },

    onLoad() {
        this.storeBindings = createStoreBindings(this, {
            store: moduleStore,
            actions: ['getCurrentWeatherData', 'getFutureWeatherData']
        });
    },

    onUnload() {
        this.storeBindings.destroyStoreBindings();
    },

    refreshData() {
        if (!myChart) return;
        // 刷新页面数据
        this.setData({
            todayWeather: this.getCurrentWeatherData(),
            futureWeathers: this.getFutureWeatherData(this.data.step)
        });
        const tMax = [],
            tMin = [];
        this.data.futureWeathers.forEach((item) => {
            tMax.push(item.T_max);
            tMin.push(item.T_min);
		});
		// 重新绘制图表
        chartResize(this);
        myChart.clear();
        myChart.setOption(weatherChartOption(tMax, tMin));
    },

    async onReady() {
        try {
            await getWeatherPrediction();
            this.refreshData();
        } catch (err) {
            Message.error(messageDefaultConfig(err.message));
        }
    },

	// 下拉刷新事件
    onPullDownRefresh: tools.throttle(async function () {
        try {
            await getWeatherPrediction();
            this.refreshData();
        } catch (err) {
            Message.error(messageDefaultConfig(err.message));
        }
    }, 10000),

    chartInitFinish(e) {
        myChart = e.detail;
        this.refreshData();
    },

	// 改变预测步长事件
    handleChangeStep() {
        this.setData({
            pickerVisible: true
        });
    },

	// 确定选择预测步长事件
    pickerChange(e) {
        if (e.detail.value === this.data.step) return;
        this.setData({
            step: e.detail.value
		});
		// 刷新数据
        this.refreshData();
    }
});
